<!--
 * @Author: zhangyongbing
 * @Date: 2022-05-07 15:49:46
 * @LastEditors: zhangyongbing
 * @LastEditTime: 2022-05-07 18:20:25
 * @Description: 绑定明细
 * @FilePath: /psys-ppm-web/src/pages/SystemPage/exThirdAuth/subpage/bindingDetails.vue
-->
<template>
	<div class="detailList">
		<div style="padding: 0 10px">
			<div class="search">
				<div class="search_input">
					<el-input
						v-model="searchForm.psysAccNo"
						placeholder="云平台账号"
						style="margin-right: 15px; width: 140px"
						clearable
						size="mini"
					></el-input>
					<el-button type="primary" size="mini" @click="checkData">查询</el-button>
				</div>
				<div class="leftIcon">
					<el-tooltip class="item" effect="dark" content="新增" placement="top">
						<el-button class="editBtn" icon="el-icon-plus" size="mini" @click="manage('add')"></el-button>
					</el-tooltip>
					<!-- <el-tooltip class="item" effect="dark" content="编辑" placement="top">
						<el-button
							size="mini"
							icon="el-icon-edit-outline"
							class="editBtn"
							@click="manage('edit')"
							:disabled="!rowId"
						></el-button>
					</el-tooltip>
					<el-tooltip class="item" effect="dark" content="删除" placement="top">
						<el-button
							size="mini"
							icon="el-icon-delete"
							class="deleteBtn"
							@click="manage('delete')"
							:disabled="!rowId"
						></el-button>
					</el-tooltip> -->
				</div>
			</div>
			<BaseTable
				:loading="isLoading"
				:data="tableList"
				:tableHeight="tableHeight"
				:columns="columns"
				:pagination="queryall"
				@size-change="sizeChange"
				@current-change="pageChange"
				@details="getRowData"
			></BaseTable>
		</div>
		<el-drawer
			:title="type == 'add' ? '新增绑定明细信息' : '编辑绑定明细信息'"
			:visible.sync="managePageShow"
			direction="rtl"
			size="30%"
			:append-to-body="true"
		>
			<bindingDetailsInfo
				:detailRow="detailRow"
				:rowId="rowId"
				:parentId="parentId"
				v-if="managePageShow"
				:close="close"
				:type="type"
			></bindingDetailsInfo>
		</el-drawer>
	</div>
</template>

<script>
import BaseTable from "@/components/BaseTable"
import bindingDetailsInfo from "./bindingDetailsInfo" //第三方授权关联权限 增改页面
export default {
	name: "detailList",
	components: {
		BaseTable,
		bindingDetailsInfo,
	},
	props: {
		//第三方授权id
		parentId: {
			type: String | Number,
		},
		detailRow: {
			type: Object,
		},
	},
	data() {
		return {
			rowId: "", //行id
			isLoading: false, //加载列表时的loading
			tableList: [], //表格数据
			//表头
			columns: [
				{
					prop: "fullName",
					label: "第三方系统全称",
				},
				{
					prop: "psysAccNo",
					label: "云平台账号",
				},
				{
					prop: "thirdAccNo",
					label: "第三方账号",
				},
				{
					prop: "status",
					label: "状态",
					render: (h, params) => {
						// （0：启用，1：停用）
						let text = "",
							type = ""
						switch (params.row.status) {
							case "0":
								;(text = "启用"), (type = "success")
								break
							case "1":
								;(text = "停用"), (type = "warning")
								break
						}

						return <div>{text ? <el-tag type={type}>{text}</el-tag> : <span>{text}</span>}</div>
					},
				},
				{
					prop: "createName",
					label: "创建人",
				},
				{
					prop: "createTime",
					label: "创建时间",
				},
				{
					prop: "updateName",
					label: "更新人",
				},
				{
					prop: "updateTime",
					label: "更新时间",
				},
				{
					label: "操作",
					fixed: "right",
					align: "center",
					width: 120,
					render: (h, params) => {
						return h(
							"div",
							{
								calss: "btnClass",
							},
							[
								h("el-button", {
									props: {
										size: "mini",
									},
									style: {
										// marginRight: "10px",
									},
									domProps: {
										// 添加标签,使用自己引入的iconfont图标
										innerHTML: `<span style='color:#0B6CD6;><i class='iconfont icon-1-07'></i><span  style='padding-left:5px;'>编辑</span></span>`,
									},
									on: {
										click: () => {
											click: this.getRowData(params.row), this.manage("edit")
										},
									},
								}),
								h("el-button", {
									props: {
										size: "mini",
									},

									domProps: {
										// 添加标签,使用自己引入的iconfont图标
										// innerHTML: `<i class="iconfont icon-tubiao_liebiaoshanchu" style="color:#DA2821"></i> 删除`
										innerHTML: `<span style='color:#F75E5E;><i class='iconfont icon-1-08'></i><span  style='padding-left:5px;'>删除</span></span>`,
									},
									on: {
										click: () => {
											click: this.getRowData(params.row), this.delExAuthority()
										},
									},
								}),
							]
						)
					},
				},
			],
			// 分页数据
			queryall: {
				totalNum: 10,
				startpage: 1,
				pagesize: 15,
			},
			searchForm: {
				psysAccNo: "",
			},
			type: "", //状态,新增或编辑
			managePageShow: false, //是否展示新增或编辑
		}
	},
	computed: {
		//表格高度
		tableHeight: function () {
			return this.$store.state.tableHeight + 40
		},
	},
	mounted() {
		this.queryall.startpage = 1
		this.searchForm.psysAccNo = ""
		//获取字段列表
		this.getTableData()
	},
	methods: {
		/**
		 * @description: 关闭
		 * @param {*}
		 * @return {*}
		 * @author: zhangzhanhua
		 */
		close() {
			this.managePageShow = false
			this.checkData()
		},
		/**
		 * @description: 获取一行数据
		 * @param {*}
		 * @return {*}
		 * @author: zhangzhanhua
		 */
		getRowData(val) {
			this.rowId = val.id //赋值当前行id
		},
		/**
		 * @description: 管理增删改按钮
		 * @param {*}
		 * @return {*}
		 * @author: zhangzhanhua
		 */
		manage(type) {
			// 删除或编辑时需要选中状态
			if (type == "edit" || type == "delete") {
				if (!this.rowId) {
					this.$message.error("请选择一条数据")
					return
				}
			}
			this.type = type //状态
			if (type == "add") {
				//新增打开弹窗
				this.managePageShow = true
				return
			}
			if (type == "edit") {
				//编辑打开弹窗
				this.managePageShow = true
				return
			}
			if (type == "delete") {
				//删除
				this.delExAuthority() //删除函数
				return
			}
		},
		/**
		 * @description: 删除权限
		 * @param {*}
		 * @return {*}
		 * @author: zhangzhanhua
		 */
		delExAuthority() {
			let _this = this
			_this
				.$confirm("确认删除该条数据?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				})
				.then(() => {
					// _this.isLoading = true
					_this.$http
						.delete(`/${this.$ServiceName}/api/external/dd_third_psys/${this.$version}/delete_by_id`, {
							params: {
								id: this.rowId, //当前行id
							},
						})
						.then(res => {
							// _this.isLoading = false
							if (res.data.success) {
								_this.$message.success(res.data.msg)
								_this.checkData()
							} else {
								_this.$message.error(res.data.msg)
							}
						})
				})
				.catch(() => {})
		},
		/**
		 * @description: 页数改变
		 * @param {*} val
		 * @return {*}
		 * @author: zhangzhanhua
		 */
		sizeChange(val) {
			this.queryall.startpage = 1
			this.queryall.pagesize = val
			this.getTableData()
		},
		/**
		 * @description: 页码改变
		 * @param {*} val
		 * @return {*}
		 * @author: zhangzhanhua
		 */
		pageChange(val) {
			this.queryall.startpage = val
			this.getTableData()
		},
		/**
		 * @description: 查询
		 * @param {*}
		 * @return {*}
		 * @author: zhangzhanhua
		 */
		checkData() {
			this.queryall.startpage = 1
			this.getTableData()
		},
		/**
		 * @description: 获取列表数据
		 * @param {*}
		 * @return {*}
		 * @author: zhangzhanhua
		 */
		async getTableData() {
			this.isLoading = true
			this.rowId = ""
			let data = [],
				tableData = [],
				params = {
					psysAccNo: this.searchForm.psysAccNo,
					startpage: this.queryall.startpage,
					pagesize: this.queryall.pagesize,
					thirdSystemId: this.parentId,
				}
			const res = await this.$http.get(`/${this.$ServiceName}/api/external/dd_third_psys/${this.$version}/list_all`, {
				params: params,
			})
			if (res.data.success) {
				data = res.data.data
				if (data.pages) {
					tableData = data.pages
					this.queryall.totalNum = data.totalNum
				}
			}
			this.tableList = tableData
			this.isLoading = false
		},
	},
}
</script>

<style lang="less" scoped>
/deep/ .el-drawer__body {
	background-color: #f5f7fa;
}
/deep/ .el-drawer__header {
	background-color: #f5f7fa;
	margin: 0;
	padding-bottom: 10px;
	border-bottom: 1px solid #eaeaea;
}
.search {
	display: flex;
	justify-content: space-between;
	align-items: center;
	.search_input {
		display: flex;
		align-items: center;
		height: 50px;
	}
}
.userBtn {
	z-index: 100;
	text-align: right;
	padding-right: 20px;
	border-top: 1px solid #c8cfde;
	background-color: #f5f7fa;
	position: absolute;
	bottom: 0px;
	left: 0;
	right: 0;
	line-height: 50px;
}
.page {
	background: #ffffff;
	text-align: right;
	border-radius: 0 0 4px 4px;
	padding: 5px 20px;
}
</style>
